<%--
  Created by IntelliJ IDEA.
  User: LENOVO
  Date: 2021-10-16
  Time: 13:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
    <meta charset="UTF-8">
    <title>厦门医学院通勤车管理系统</title>
    <link href="./css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        .menu {
            padding-top: 10%;
            padding-left: 5%;
        }

        .cardBox {
            width: 95%;
            box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
            text-align: center;
        / / float: left;
            margin-right: 6px;
            padding: 5px;
            padding-top: 15px;
        }

        .headerBox {
            color: #fff;
            padding: 10px;
            font-size: 28px;
            height: 60px;
        }

        .bodyBox p {
            font-size: 24px;
        }


        .bodyBox {
            padding: 10px;
        }

        .bodyBox p {
            margin-left: 5px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="js/rootPath.js"></script>

    <script language="javascript">
        function new_page1() {
            window.location = root_path+"/index.jsp";
        }

        function new_page2() {
            window.location = root_path+"/index.jsp";
        }

        function new_page3() {
            window.location = root_path+"/index.jsp";
        }

        function new_page4() {
            window.location = root_path+"/index.jsp";
        }

        function new_page5() {
            window.location = root_path+"/index.jsp";
        }

        function new_page6() {
            window.location = root_path+"/index.jsp";
        }

        function new_page7() {
            window.location = root_path+"/index.jsp";
        }

        function new_page8() {
            window.location = root_path+"/index.jsp";
        }
    </script>
</head>

<body>
<div class="menu">
    <div class="cardBox" onclick="new_page1()">
        <div class="headerBox" style="background-color: #4caf50;">
            <p>出岛1</p>
        </div>
        <div class="bodyBox">
            <p id="q1">起点：</p>
            <p id="z1">终点：</p>
            <p id="tj1">途经点：</p>
        </div>
    </div>

    <div class="cardBox" onclick="new_page2()">
        <div class="headerBox" style="background-color: #4caf50;">
            <p>出岛2</p>
        </div>
        <div class="bodyBox">
            <p id="q2">起点：</p>
            <p id="z2">终点：</p>
            <p id="tj2">途经点：</p>
        </div>
    </div>

    <div class="cardBox" onclick="new_page3()">
        <div class="headerBox" style="background-color: #4caf50;">
            <p>出岛3</p>
        </div>
        <div class="bodyBox">
            <p id="q3">起点：</p>
            <p id="z3">终点：</p>
            <p id="tj3">途经点：</p>
        </div>
    </div>

    <div class="cardBox" onclick="new_page4()">
        <div class="headerBox" style="background-color: #4caf50;">
            <p>出岛4</p>
        </div>
        <div class="bodyBox">
            <p id="q4">起点：</p>
            <p id="z4">终点：</p>
            <p id="tj4">途经点：</p>

        </div>
    </div>

    <div class="cardBox" onclick="new_page5()">
        <div class="headerBox" style="background-color: #5BC0DE;">
            <p>进岛1</p>
        </div>
        <div class="bodyBox">
            <p id="q5">起点：</p>
            <p id="z5">终点：</p>
            <p id="tj5">途经点：</p>

        </div>
    </div>
    <div class="cardBox" onclick="new_page6()">
        <div class="headerBox" style="background-color: #5BC0DE;">
            <p>进岛2</p>
        </div>
        <div class="bodyBox">
            <p id="q6">起点：</p>
            <p id="z6">终点：</p>
            <p id="tj6">途经点：</p>

        </div>
    </div>
    <div class="cardBox" onclick="new_page7()">
        <div class="headerBox" style="background-color: #5BC0DE;">
            <p>进岛3</p>
        </div>
        <div class="bodyBox">
            <p id="q7">起点：</p>
            <p id="z7">终点：</p>
            <p id="tj7">途经点：</p>

        </div>
    </div>
    <div class="cardBox" onclick="new_page8()">
        <div class="headerBox" style="background-color: #5BC0DE;">
            <p>进岛4</p>
        </div>
        <div class="bodyBox">
            <p id="q8">起点：</p>
            <p id="z8">终点：</p>
            <p id="tj8">途经点：</p>

        </div>
    </div>
</div>


</body>
<script>
    $(function () {
        $.getJSON(root_path+"/getStartAndEnd.do", {}, function (data) {
            console.log(data.data);
            if (data.status == 0) {
                for (var i = 1; i < 9; i++) {
                    console.log(data.data['q' + i]);

                    $('#q' + i).html("起点：" + data.data['q' + i]);

                    $('#z' + i).html("终点：" + data.data['z' + i]);

                    $('#tj' + i).html("途经点：" + data.data['tj' + i]);

                }

            }
        });
        // $.getJSON("/car/getLocation.do", {lineId: 1}, function (data) {
        //     console.log(data.data);
        // });
    });
</script>

</html>
